<template>
  <div class="html">
    <div class="top">在线支付</div>
    <!-- <div v-if="!hide" class="wait-pay">
      请认真核对订单信息，如有错误请勿支付。请在规定时间内完成支付，剩余时间:<span
        class="yellow"
        >{{ showTime }}</span
      >
    </div> -->
    <div class="card">
      <div class="card-item">
        <div class="card-lf">订单编号</div>
        <div class="card-rt">{{detail.trade_no}}</div>
      </div>
      <div class="card-item">
        <div class="card-lf">用户信息</div>
        <div class="card-rt">{{detail.cert_name}}({{detail.mobile}})</div>
      </div>
      <div class="card-item">
        <div class="card-lf">租用商品</div>
        <div class="card-rt">
          {{detail.goods_title}} {{detail.setmeal_title}}
        </div>
      </div>
      <div class="card-item">
        <div class="card-lf">支付方式</div>
        <div class="card-rt">单期还款(第{{detail.which_period}}期)</div>
      </div>
      <div class="card-item">
        <div class="card-lf">应付金额</div>
        <div class="card-rt">{{totalAmount}}</div>
      </div>
      <div class="card-item">
        <div class="card-lf">支付状态</div>
        <div class="card-rt yellow">待支付</div>
      </div>
    </div>
    <div class="pay-list">
      <div class="pay-item-box">
        <div class="pay-item">
          <span><img class="alipayImg" :src="alipayImg" alt="" /> 支付宝</span>
          <div class="check-box">
            <img :src="checkBox" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div @click="quickPay" class="jumpTopay">立即支付</div>
  </div>
</template>

<script>
import alipayImg from "@/assets/images/alipay.png";
import checkBox from "@/assets/images/check-box.png";
import { newsBoyPay,aliQrPay } from '@/api/alipay'
export default {
  data() {
    return {
      alipayImg,
      detail:{
        cert_name:'',
        goods_title:'',
        id:'',
        mobile:'',
        rent:'',
        trade_no:'',
        which_period:-1
      },
      checkBox,
      hide: false,
      showTime: "",
      totalAmount:"",
      date: "2023-09-12 18:59:00",
    };
  },
  beforeCreate() {
    document.title = "支付";
  },
  mounted() {
    const { order_id,which_id,totalAmount } = this.$route.query;
    this.totalAmount = totalAmount;
    newsBoyPay({
      which_id,
      order_id
    }).then((res)=>{
      this.detail = res;
    })
  },
  methods: {
    quickPay(){
      const { order_id,which_id,totalAmount } = this.$route.query;
      aliQrPay({
        orderId:order_id,
        leaseId:which_id,
        totalAmount
      }).then((res)=>{
       location.href = res;
      })
    },
    formatNumber(t) {
      return t < 10 ? "0" + t : t;
    },
    getShowTime() {
      let d = +new Date(this.date);
      let today = +new Date();
      let remainD = d - today;
      let hours = Math.floor(remainD / 1000 / 60 / 60);
      let minutes = Math.floor((remainD - hours * 1000 * 60 * 60) / 1000 / 60);
      let seconds = Math.floor(
        (remainD - hours * 1000 * 60 * 60 - minutes * 1000 * 60) / 1000
      );
      return (
        this.formatNumber(hours) +
        ":" +
        this.formatNumber(minutes) +
        ":" +
        this.formatNumber(seconds)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.html {
  background-color: #f8f8f8;
  height: 100vh;
}
.yellow {
  color: #e67436;
}
.top {
  background-color: #e67436;
  height: 42px;
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
}
.wait-pay {
  width: 90%;
  margin: 20px auto;
  font-size: 14px;
  text-align: center;
}
.card {
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 5px;
}
.card-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 15px;
  color: #666;
  border-bottom: 1px solid #f5f5f5;
}
.card-lf {
  width: 90px;
}
.card-rt {
  width: calc(100% - 90px);
  word-break: break-all;
}
.alipayImg {
  width: 36px;
  height: 36px;
}
.pay-list {
  margin-top: 15px;
}
.pay-item-box {
  margin-left: 15px;
  margin-right: 15px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}
.pay-item {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  font-size: 16px;
  justify-content: space-between;
  span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.alipayImg {
  margin-right: 10px;
}
.check-box {
  width: 26px;
  height: 26px;
  position: relative;
  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
.jumpTopay {
  position: fixed;
  left: 50%;
  bottom: 30px;
  width: 240px;
  height: 36px;
  margin-left: -120px;
  background-color: #e67436;
  color: #fff;
  display: flex;
  font-size: 16px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}
</style>
